<template>
  <div class="content">
    <div class="bxo-a">
      <div class="box-b">
        <div class="box-c">
          <div class="box-d">
            <ul class="box-dlist">
              <li>
                <router-link to="">← 全部分类</router-link>
              </li>
              <li>本周最受欢迎</li>
              <li>新秀菜谱</li>
              <li>往期头条</li>
              <li>厨房101</li>
              <li>月度最佳</li>
              <li>流行菜单</li>
            </ul>
          </div>
          <div class="box-e">
            <p class="box-ep">流行搜索</p>
            <ul class="box-elist">
              <li>烤鱼烤箱</li>
              <li>鸡蛋豆腐</li>
              <li>八爪鱼</li>
              <li>油爆虾</li>
              <li>红薯粉</li>
              <li>木耳菜</li>
              <li>鸭腿</li>
              <li>贝果</li>
              <li>冬瓜海带汤</li>
              <li>外貌协会</li>
            </ul>
          </div>
        </div>
        <div class="hao-ce">
          <h1 class="page-title">最近流行的菜单</h1>
          <div class="hao-lid">
            <div v-for="(item, index) in pageList" :key="index" class="hao-lis">
              <div class="hao-img1">
                <img :src="item.imgSrc" alt="" />
              </div>
              <div class="hao-l">
                <p class="hao-lp">{{ item.name }}</p>
                <div class="hao-a">
                  <p>{{ item.menu }}</p>
                  <a href="#">{{ item.dian }}</a>
                  <span>{{ item.chang }}</span>
                  <span>{{ item.sho }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="block">
            <!-- <span class="demonstration">大于 7 页时的效果</span> -->
            <el-pagination layout="prev, pager, next" :total="list.length" :page-size="20" @current-change="fn_tiaozhuan" background>
            </el-pagination
            >
          </div>
        </div>
         <Menuitem></Menuitem>
      </div>
    </div>
  </div>
</template>,
<script>
import Menuitem from "../components/Menuitem.vue"
import axios from "axios";
export default {
  name: "Find",

  data() {
    return {
      list: [],
      pageList:[],
      num:0,
      num1:20
    };
  },
  components:{
    Menuitem
  },
  mounted() {},
  created() {
    this.fn();
  },
  methods: {
    async fn() {
      let { data } = await axios.get(
        "https://mock.presstime.cn/mock/61bd3e7d90bfb2001617923b/url/zhao"
      );
    //   console.log(data);
      this.list = data.data.list;
      this.fn_setPage()
    },
    fn_setPage(){
        this.pageList = this.list.filter((item,index )=> {
          return index >this.num && index < this.num1
      })
      console.log(this.pageList);
    },
    fn_tiaozhuan(v){
        console.log(v);
        this.num = (v-1)*20
        this.num1 = v*20;
        this.fn_setPage();

    }
  },
};
</script>

<style scoped lang="less">
.box-b {
  display: flex;
}
.box-c {
  width: 123px;
  height: 708px;
  padding: 0px 32px 32px 10px;
}
.box-dlist li {
  margin: 0px;
  padding: 0px;
  margin: 10px 0;
  font-size: 16px;
  color: #222;
}
.box-dlist li:hover {
  color: Red;
}
.box-dlist li a:hover {
  color: Red;
}
.box-e {
  margin-top: 50px;
}
.box-ep {
  font-size: 16px;
  color: #909090;
}
.box-elist li {
  font-size: 14px;
  color: #222;
  margin: 10px 0;
}
.box-elist li:hover {
  color: Red;
}

/* 最近流行菜 */
.hao-ce{
    height: 3100px;
}
.page-title {
  font-size: 34px;
  margin: 0 0 16px;
  font-weight: 700;
}
.hao-lis {
  display: flex;
  width: 493px;
  height: 136px;
  border: 1px solid #f2f2f2;
  margin-bottom: 14px;
}
.hao-l {
  max-width: 270px;
  padding: 15px 0 0 20px;
}
.hao-lp {
  font-size: 20px;
  font-weight: 1000;
  padding-bottom: 5px;
  color: #000;
}
.hao-a {
  font-size: 14px;
}
.hao-a p {
  font-size: 14px;
  color: #72a46d;
}
.hao-a a {
  color: #000;
  margin-right: 10px;
}
.hao-a span {
  color: #909090;
  margin-right: 15px;
}
//分页器
/deep/ .el-pager .more::before {
    line-height: 0;
}
.block{
    margin: 3em 0 1em;
}
</style>